﻿@{
    ViewBag.Title = "添加联系";
    Layout = "~/Views/Shared/_FlowForm.cshtml";
}

<script src="~/Content/scripts/jquery/layer/jquery.js?v=1.83.min"></script>
<script src="~/Content/scripts/jquery/layer/layer.min.js"></script>
<link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/styles/BillDetail.css?v=1.1" rel="stylesheet" />
<link href="~/Content/styles/anitmate.css" rel="stylesheet" />
<link href="~/Content/styles/style.css" rel="stylesheet" />

<link href="~/Content/scripts/plugins/tree/tree.css" rel="stylesheet" />
<link href="~/Content/scripts/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
<script src="~/Content/scripts/plugins/tree/tree.js"></script>

<script src="/Content/scripts/plugins/validator/js?v=XgpF3bkqcHESsLip2j1dhS6n2I-zHyD2VCazpanqH6Q1"></script>
<script src="/Content/scripts/utils/js?v=FNqaC7G7A87_J4VCIQpQEAO-d_2Qf2wSxoZexwRzulo1"></script>
<script src="~/Content/scripts/plugins/jqgrid/jqgrid.js"></script>
<script src="~/Content/scripts/utils/UploadFile.js"></script>
<script src="~/Content/scripts/plugins/jquery.md5.js"></script>
<script src="~/Content/scripts/plugins/uploadify/ajaxfileupload.js"></script>
<script>
    var keyValue = request('keyValue');
    var _organizeid = "@LeSoft.Application.Code.OperatorProvider.Provider.Current().CompanyId";
    var IsTurn = 0;
    var list = [];
    var _length = 0;
    var fileFilter = [];
    var img_index = 0;
    var img_src = "";
    $(function () {
        initControl();

        //计算居中位置
        var mg_top = ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);

        $(".photo-div").css({
            "margin-top": "" + mg_top + "px"
        });
        //关闭
        $(".photo-close").click(function () {
            $(".photo-mask").hide();
            $(".photo-panel").hide();
        });
        //下一张
        $(".photo-panel .photo-div .arrow-next").click(function () {
            img_index++;
            if (img_index >= $("#preview li img").length) {
                img_index = 0;
            }
            img_src = $("#preview li img").eq(img_index).attr("src");
            photoView($("#preview li img"));
        });
        //上一张
        $(".photo-panel .photo-div .arrow-prv").click(function () {
            img_index--;
            if (img_index < 0) {
                img_index = $("#preview li img").length - 1;
            }
            img_src = $("#preview li img").eq(img_index).attr("src");
            photoView($("#preview li img"));
        });
        //调用
        $("#preview li img").live("click", function () {
            $(".photo-mask").show();
            $(".photo-panel").show();
            img_src = $(this).attr("src");
            img_index = $(this).index();
            photoView($(this));
        });

    });

    //自适应预览
    function photoView(obj) {
        if ($(obj).width() >= $(obj).height()) {
            $(".photo-panel .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");
            $(".photo-panel .photo-div .photo-img .photo-view-w img").attr("src", img_src);
        } else {
            $(".photo-panel .photo-div .photo-img .photo-view-w").attr("class", "photo-view-h");
            $(".photo-panel .photo-div .photo-img .photo-view-h img").attr("src", img_src);
        }


    }
    //显示上传文件
    function SetFile(files) {
        if (files.length > 4) {
            dialogMsg("最多只能传4个附件", 0);
            return;
        }
        IMG = "";
        fileFilter = files;
        var _html = "<ul>";
        debugger;
        for (var i = 0; i < files.length; i++) {
            if (files[i]) {
                if (files[i].constructor.name == "File") {
                    _html += "<li><a  class='Del_Img' onclick='Del_Img(" + i + ");' title='删除' >x</a><img id='uploadImage_" + i + "' src='" + window.URL.createObjectURL(files[i]) + "' class='" + files[i].name + "'  /></li>";
                }
                else if (files[i].constructor.name == "Object") {
                    _html += "<li><a class='Del_Img' onclick='Del_Img(" + i + ");' title='删除'>x</a><img id='uploadImage_" + i + "' src='" + files[i].FileUrl + "'  class='" + files[i].name + "'  /></li>";
                }
            }

        }
        _html += "</ul>"
        $("#preview").html(_html);
        debugger;

    }
    function Del_Img(s) {
        fileFilter = $.grep(fileFilter, function (value) {
            return value != fileFilter[s];
        })
        var arrFile = [];
        for (var j = 0, fileb; fileb = fileFilter[j]; j++) {
            arrFile.push(fileb);

        }
        SetFile(arrFile);
    }
    //上传文件到后台
    function UploadFile() {
        $.ajaxFileUpload({
            url: "../../PropertyManage/CS_LinkBill/UploadFile",
            secureuri: false,
            fileElementId: 'fileImage',
            dataType: 'json',
            success: function (data) {
                // dialogMsg(data.message, 1);
                var files = document.getElementById('fileImage').files;
                var arrFile = [];
                if (files.length > 0) {
                    if (fileFilter.length > 0) {
                        for (var j = 0, fileb; fileb = fileFilter[j]; j++) {
                            arrFile.push(fileb);
                        }
                        for (var i = 0, filea; filea = files[i]; i++) {
                            var count = 0;
                            for (var j = 0, fileb; fileb = fileFilter[j]; j++) {
                                if (filea.name == fileb.name && filea.size == fileb.size) {
                                    count++;
                                }
                            }
                            if (count == 0) {
                                arrFile.push(filea);
                            }
                        }
                        SetFile(arrFile);
                    }
                    else {
                        SetFile(files);
                    }
                }
            }

        });
    }
    function SetFileDisplay(dataArray) {
        var _html = "<ul>";
        if (dataArray.length > 0) {
            fileFilter = dataArray;
            for (var i = 0; i < dataArray.length; i++) {
                if (dataArray[i].Type == 21) {
                    _html += "<li><img id='uploadImage_" + i + "' src='" + dataArray[i].FileUrl + "'  /></li>";
                }
            }
            _html += "</ul>";
            $("#preview").html(_html);

        }

    }

    function initControl() {
        var Mode = "@ViewBag.Mode";
        if (Mode == "True") {
            $("#Code").attr("placeholder", "系统已启用自动编号").attr("disabled", "disabled");
        } else {
            $("#Code").attr("isvalid", "yes").attr("checkexpession", "NotNull").attr("placeholder", "请输入编号");
        }
        $(".completetr").removeAttr("disabled");
        //绑定组织机构
        $("#OrganizeId").ComboBoxTree({
            url: "../../BaseManage/Organize/GetTreeJson",
            description: "==请选择所属机构==",
            height: "250px",
            click: function (data) {
                _organizeid = data.id;
            }
        });
        if (_organizeid != "") $("#OrganizeId").ComboBoxTreeSetValue(_organizeid);
        //联系范围
        $("#LinkRange").ComboBox({
            data: [{ "key": 1, "value": "业户" }, { "key": 2, "value": "其他" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#LinkRange").ComboBoxSetValue(1);
        //业务类别
        $("#BillType").ComboBox({
            data: [{ "key": 7, "value": "其他" }, { "key": 1, "value": "报修" }, { "key": 2, "value": "报事" }, { "key": 3, "value": "投诉" }, { "key": 4, "value": "建议" }, { "key": 5, "value": "表扬" }, { "key": 6, "value": "咨询" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#BillType").ComboBoxSetValue(1);

        //业务范围
        $("#Kind").ComboBox({
            data: [{ "key": 1, "value": "有偿维修" }, { "key": 2, "value": "无偿维修" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#Kind").ComboBoxSetValue(1);

        $("#State").ComboBox({
            data: [{ "key": 1, "value": "未处理" }, { "key": 2, "value": "跟进中" }, { "key": 3, "value": "待回访/检验" }, { "key": 4, "value": "已完成" }, { "key": 5, "value": "已退单" }, { "key": 6, "value": "不处理" }],
            id: "key",
            text: "value",
            description: "==请选择=="
        });
        $("#State").ComboBoxSetValue(1);
        $("#lr-addRepair").attr("disabled", "disabled");
        $("#lr-addRectify").attr("disabled", "disabled");


        if (!!keyValue) {
            $.SetForm({
                url: "../../PropertyManage/CS_LinkBill/GetFormJson",
                param: { keyValue: keyValue },
                success: function (data) {

                    $("#BaseInfo").SetWebControls(data.data1);
                    $("#OrganizeId").ComboBoxTreeSetValue(data.data1.OrganizeId);
                    $("#PStructId").val(data.data1.Location);
                    $("#PStructId").attr("title", data.data1.PStructId);
                    $("#CustomerId").val(data.data1.CustomerName);
                    $("#CustomerId").attr("title", data.data1.CustomerId);
                    $("#LinkMan").attr("title", data.data1.LinkManId);
                    $("#CompleteUserName").attr("title", data.data1.CompleteUserId);
                    if (data.data1.State > 1) {
                        $("#BaseInfo div").attr("disabled", "disabled");
                        $("#BaseInfo input").attr("disabled", "disabled");
                        $("#BaseInfo textarea").attr("disabled", "disabled");
                        $("#BaseInfo a").attr("disabled", "disabled");
                        $(".completetr").attr("disabled", "disabled");
                    }
                    SetFileDisplay(data.data3);//附件
                    IsTurn = data.data1.IsTurn;
                    if (IsTurn == 1) {
                        GetBills();  //相关表单
                    }
                    else if (data.data1.State == 1) {
                        $("#lr-addRepair").removeAttr("disabled");
                        $("#lr-addRectify").removeAttr("disabled");
                    }

                }
            });
        }
        SendMessage();
    }
    //操作记录
    function getOperateGrid() {
        $gridTable = $("#gridTable_Operate");
        $gridTable.jqGrid({
            url: "../../SystemManage/Setting/GetOperateRecordList",
            postData: { BillId: keyValue },
            datatype: "json",
            height: 650,
            hidegrid: false,
            caption: "操作记录",
            autowidth: true,
            colModel: [
               { label: '项目主键', name: 'Id', hidden: true },
                        { label: '业务类别', name: 'Type', width: 100, align: 'center', sortable: false },
                        { label: '操作人', name: 'FromOperateName', width: 100, align: 'center', sortable: false },
                        { label: '操作时间', name: 'Date', width: 170, align: 'center', sortable: false },
                        {
                            label: "操作内容", name: "Content", index: "Content", width: 590, align: "left", sortable: false,
                            formatter: function (cellvalue, options, rowObject) {
                                if (!!rowObject.ToOperateName)
                                    return "发起者：" + rowObject.FromOperateName + "，接受者：" + rowObject.ToOperateName + "<br/>" + cellvalue;
                                else
                                    return "发起者：" + rowObject.FromOperateName + "<br/>" + cellvalue;
                            }
                        },
            ],
            viewrecords: true,
            rownumbers: true,

        });
    }

    //保存表单
    function AcceptClick() {
        if (!$('#BaseInfo').Validform()) {
            return false;
        }
        if (!$("#Date").val()) { dialogMsg("单据时间不允许为空", 0); return false; }
        if (IsTurn == 1) {
            dialogClose();
        }
        debugger;
        var postData = $("#BaseInfo").GetWebControls("");
        postData["PStructId"] = $("#PStructId").attr("title");
        postData["Location"] = $("#PStructId").val();
        postData["CustomerId"] = $("#CustomerId").attr("title");
        postData["CustomerName"] = $("#CustomerId").val();
        postData["CompleteUserId"] = $("#CompleteUserId").attr("title");
        postData["LinkManId"] = $("#LinkMan").attr("title");
        postData["SourceType"] = "0";
        if (postData["State"] > 2 && postData["State"] < 5) {

            if ($("#CompleteUserName").val() == "" || $("#CompleteUserName").val() == null) {
                dialogMsg("请输入完成信息", 0);
                return false;
            }
        }
        var ImgData = [];
        $("#preview img").each(function () {
            if (!!$(this).attr("class")) {
                ImgData.push({
                    Name: $(this).attr("class")
                })
            }
        })
        $.SaveForm({
            url: "../../PropertyManage/CS_LinkBill/SaveForm?keyValue=" + keyValue + "&IMG=" + JSON.stringify(ImgData),
            param: postData,
            loading: "正在保存数据...",
            success: function () {
                $.currentIframe().$("#gridTable").trigger("reloadGrid");
            }
        })

    }
    //相关工单
    function GetBills() {
        $.ajax({
            url: "../../PropertyManage/CS_LinkBill/GetBills?SourceId=" + keyValue,
            type: "get",
            dataType: "json",
            success: function (data) {
                $("#listGet").html("");
                if (data.count > 0) {
                    $("#listGet").html(data.html);
                }
                else {
                    $("#listGet").html("<span style='color:red;'>目前暂无数据</span>");
                }
            },
            error: function (Error) {
                console.log("GetBills error" + Error);
                $("#listGet").html("");
                $("#listGet").html("<span style='color:red;'>目前暂无数据</span>");
            }
        });
    }
    //查看聊天记录
    function GetMSG() {
        $.ajax({
            url: "../../PropertyManage/CS_LinkBill/GetChatMessage?keyValue=" + keyValue,
            type: "get",
            dataType: "json",
            success: function (data) {

                $(".chat-discussion").html("");
                if (data.count > 0) {
                    $(".chat-discussion").html(data.html);
                }
                else {
                    $(".chat-discussion").html("<span style='color:red;'>目前暂无数据</span>");
                }
            },
            error: function (Error) {
                console.log("GetBills error" + Error);
                $(".chat-discussion").html("");
                $(".chat-discussion").html("<span style='color:red;'>目前暂无数据</span>");
            }
        });
    }
    //发送消息
    function SendMessage() {
        var $textarea = $('.chat-message-form').find('.form-group').find('textarea');
        $textarea.bind('keypress', function (event) {
            if (event.keyCode == "13") {
                var sendText = $(this).val();
                if (sendText) {
                    var postData = $("#BaseInfo").GetWebControls("");
                    postData["MsgContent"] = sendText;
                    postData["Date"] = "@LeSoft.Util.Time.Now";
                    postData["FromUserId"] = "@LeSoft.Application.Code.OperatorProvider.Provider.Current().UserId";
                    postData["FromUserName"] = "@LeSoft.Application.Code.OperatorProvider.Provider.Current().UserName";
                    //postData["ToUserId"] = DateTime.Now;
                    //postData["ToUserName"] = DateTime.Now;
                    $.ajax({
                        url: "../../PropertyManage/CS_LinkBill/SaveMSGForm?keyValue=" + keyValue,
                        data: postData,
                        type: "POST",
                        dataType: "json",
                        success: function (data) {

                            GetMSG();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            Loading(false);
                            dialogMsg(errorThrown, -1);
                        }
                    });

                    $('.chat-message-form').find('.form-group').html(' <textarea class="form-control message-input" name="message" placeholder="输入消息内容，按回车键发送"></textarea>');
                    SendMessage();
                }
            }
        });
    }
    //转维修单
    function btn_add_repair() {
        if (keyValue == "") {
            dialogMsg("请先保存再转单", 0);
        }
        else {
            //var postData = $("#BaseInfo").GetWebControls("");
            //postData["PStructId"] = $("#PStructId").attr("title");
            //postData["Location"] = $("#PStructId").val();
            //postData["CustomerId"] = $("#CustomerId").attr("title");
            //postData["CustomerName"] = $("#CustomerId").val();
            //postData["Id"] = keyValue;
            //$.RemoveForm({
            //    msg: "是否确定将此单转为维修单,转单后此单信息不可修改",
            //    url: "../../PropertyManage/CS_LinkBill/CreateRepairForm?Type=1&keyValue=" + keyValue,
            //    param: postData,
            //    success: function (data) {
            //        $('#lr-addRepair').attr('disabled', 'disabled');
            //        $('#lr-addRectify').attr('disabled', 'disabled');
            //        IsTurn = 1;
            //        if (keyValue != "") {
            //            GetBills();
            //            $("#State").ComboBoxSetValue(2);
            //        }
            //        else {
            //            $.currentIframe().$("#gridTable").trigger("reloadGrid");
            //        }
            //    }
            //})
            dialogConfirm('注：是否确定将此单转为维修单,转单后此单信息不可修改', function (r) {
                if (r) {
                    AcceptClick();
                    dialogOpen({
                        id: "Form",
                        title: '添加维修单',
                        url: '/PropertyManage/CS_RepaireBill/Detail?sourceType=3&sourceId=' + keyValue,
                        width: "1100px",
                        height: "850px",
                        btn: null,
                        callBack: function () {
                        }
                    });
                }
            });
        }

    }
    //转投诉单
    function btn_add_rectify() {
        if (keyValue == "") {
            dialogMsg("请先保存再转单", 0);
        }
        else {
            //var BillId = "";
            //var postData = $("#BaseInfo").GetWebControls("");
            //postData["PStructId"] = $("#PStructId").attr("title");
            //postData["Location"] = $("#PStructId").val();
            //postData["CustomerId"] = $("#CustomerId").attr("title");
            //postData["CustomerName"] = $("#CustomerId").val();
            //postData["Id"] = keyValue;
            //$.RemoveForm({
            //    msg: "是否确定将此单转为投诉单,转单后此单信息不可修改",
            //    url: "../../PropertyManage/CS_LinkBill/CreateRepairForm?Type=2&keyValue=" + keyValue,
            //    param: postData,
            //    success: function (data) {
            //        $('#lr-addRepair').attr('disabled', 'disabled');
            //        $('#lr-addRectify').attr('disabled', 'disabled');
            //        IsTurn = 1;
            //        if (keyValue != "") {
            //            GetBills();
            //            $("#State").ComboBoxSetValue(2);
            //        }
            //        else {
            //            $.currentIframe().$("#gridTable").trigger("reloadGrid");
            //        }
            //    }
            //});
            dialogConfirm('注：是否确定将此单转为投诉单,转单后此单信息不可修改', function (r) {
                if (r) {
                    AcceptClick();
                    dialogOpen({
                        id: "Form",
                        title: '添加投诉单',
                        url: '/PropertyManage/CS_Complaints/Form?sourceType=3&sourceId=' + keyValue,
                        width: "1100px",
                        height: "850px",
                        btn: null,
                        callBack: function () {
                        }
                    });
                }
            });
        }

    }
    //查看单据详情
    function OnView(BillId, Type) {
        if (Type == 1) {
            dialogOpen({
                id: "Form",
                title: '维修单详情',
                url: '/PropertyManage/CS_RepaireBill/Detail?keyValue=' + BillId,
                width: "1100px",
                height: "850px",
                btn: null,
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick();
                }
            });
        }
        else {
            dialogOpen({
                id: "Form",
                title: '投诉单详情',
                url: '/PropertyManage/CS_Complaints/Form?keyValue=' + BillId,
                width: "1100px",
                height: "850px",
                btn: null,
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick();
                }
            });
        }
    }
    function DataItemSelect(type, obj) {
        if ($("#OrganizeId").attr('data-value') == undefined) {
            dialogMsg("请先选择机构", 0);
        } else {
            if (!!$(obj).attr("disabled")) { return false; }
            var options = {};
            switch (type) {
                case 1: {
                    var data = [{ id: "PStructId", text: "", value: "" }, { id: "CustomerId", text: "", value: "" }, { id: "LinkMan", text: "", value: "" }, { id: "LinkPhone", text: "", value: "" }];
                    options = {
                        category: 0,
                        type: 1,
                        organizeid: $("#OrganizeId").attr('data-value'),
                        data: data
                    };
                }; break;
            }
            DataItemClick(JSON.stringify(options));
        }


    }
</script>

<div id="wrapper" style="background: #fff;">
    <div id="left-side">
        <ul>
            <li class="choose active">
                制单派单
            </li>
            <li class="pay">
                线上沟通
            </li>
            <li class="wrap">
                业务日志
            </li>
        </ul>
    </div>
    <div id="border">
        <div id="line" class="one"></div>
    </div>
    <div id="right-side" class="tab-content">
        <div id="first" class="tab-pane active" style="max-height: 770px; overflow-y: scroll;">
            <div id="BaseInfo" style=" margin-right: 15px; ">
                <table class="form">
                    <tr>
                        <td class="formTitle">所属机构<font face="宋体">*</font></td>
                        <td class="formValue">
                            <div id="OrganizeId" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                        </td>
                        <th class="formTitle">单据编号<font face="宋体">*</font></th>
                        <td class="formValue">
                            <input id="Code" type="text" onblur="$.ExistField(this.id,'../../PropertyManage/CS_Decorate/ExistCode')" class="form-control" placeholder="系统已启用自动编号" isvalid="yes" />
                        </td>
                        <th class="formTitle">单据日期<font face="宋体">*</font></th>
                        <td class="formValue">
                            <input id="Date" type="text" class="form-control input-wdatepicker" placeholder="请输入单据日期" value="@LeSoft.Util.Time.GetToday("yyyy-MM-dd HH:mm:ss")" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">联系范围<font face="宋体">*</font></th>
                        <td class="formValue">
                            <div id="LinkRange" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                        </td>
                        <th class="formTitle">业务类别<font face="宋体">*</font></th>
                        <td class="formValue">
                            <div id="BillType" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
                        </td>
                        <th class="formTitle">业务范围</th>
                        <td class="formValue">
                            <div id="Kind" type="selectTree" class="ui-select"></div>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">业户地点<font face="宋体">*</font></th>
                        <td class="formValue" colspan="3">
                            <div class="input-group" style="width: 100%;">
                                <input id="PStructId" type="text" class="form-control" isvalid="yes" checkexpession="NotNull">
                                <span class="input-group-btn">
                                    <a onclick="DataItemSelect(1,this)" class="form-control" style="cursor: pointer"><i class="fa fa fa-book" style=" font-size: 20px; padding-right: 5px; padding-top: 3px; color: gray"></i></a>
                                </span>
                            </div>
                        </td>
                        <th class="formTitle">业户名称</th>
                        <td class="formValue">
                            <input id="CustomerId" type="text" class="form-control" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">联系人<font face="宋体">*</font></th>
                        <td class="formValue">
                            <div class="input-group" style="width: 100%;">
                                <input id="LinkMan" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
                            </div>
                        </td>
                        <th class="formTitle">联系电话<font face="宋体">*</font></th>
                        <td class="formValue">
                            <input id="LinkPhone" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
                        </td>
                        <th class="formTitle">期望完成日期</th>
                        <td class="formValue">
                            <input id="ExpectDate" type="text" class="form-control input-wdatepicker" value="@DateTime.Now.AddDays(2).ToString("yyyy-MM-dd HH:mm:ss")" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })" />
                        </td>
                    </tr>

                    <tr>
                        <th class="formTitle" valign="top" style="padding-top: 4px;">
                            联系内容<font face="宋体">*</font>
                        </th>
                        <td class="formValue" colspan="5">
                            <textarea id="LinkContent" class="form-control" style="height: 50px;" isvalid="yes" checkexpession="NotNull"></textarea>
                        </td>
                    </tr>
                    <tr style=" height: 20px; border-bottom: 1px dashed #cecece;">
                        <td colspan="6"></td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <div class="box" style="    height: 100px;">
                                <img style="position: relative; float: left; width: 60px; height: 60px;" src="~/Content/images/icon_app_add.png" />
                                <input id="fileImage" type="file" size="30" onchange=" UploadFile()" name="fileselect[]" accept="image/png,image/gif,image/jpeg" multiple style="position: absolute; width: 60px; height: 60px; opacity: 0;" />
                                <div id="preview" style=" margin-left: 13px;">
                                </div>
                                <div class="photo-mask"></div>
                                <div class="photo-panel">
                                    <div class="photo-div">
                                        <div class="photo-left">
                                            <div class="arrow-prv"></div>
                                        </div>
                                        <div class="photo-img">
                                            <div class="photo-bar">
                                                <div class="photo-close"></div>
                                            </div>
                                            <div class="photo-view-h">
                                                <img src="" />
                                            </div>
                                        </div>
                                        <div class="photo-right">
                                            <div class="arrow-next"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr style=" height: 10px; border-bottom: 1px dashed #cecece;"><td colspan="6"></td> </tr>
                    <tr style="background: #B1ddff;">
                        <th class="formTitle">完成状态:</th>
                        <td class="formValue">
                            <div id="State" disabled type="selectTree" class="ui-select"></div>
                        </td>
                        <td></td>
                        <td align="right"><a id="lr-addRepair" disabled class="btn btn-success btn-xl" onclick="btn_add_repair()"><i class="fa fa-plus"></i>&nbsp;转维修单</a></td>
                        <td align="center"><a id="lr-addRectify" disabled class="btn btn-success btn-xl" onclick="btn_add_rectify()"><i class="fa fa-plus"></i>&nbsp;转投诉单</a>  </td>
                        @*<td >
                                <a id="lr-aedit" class="btn btn btn-primary btn-xs" onclick=""><i class="fa fa-edit"></i>&nbsp;查看单据</a>
                            </td>*@

                        <td></td>
                    </tr>
                    <tr style=" height: 0px; border-bottom: 1px dashed #cecece;"><td colspan="6"></td> </tr>
                    <tr>
                        <td align="center">相关工单</td>
                        <td colspan="5" id="listGet"></td>
                    </tr>
                    <tr style=" height: 10px; border-bottom: 1px dashed #cecece;"><td colspan="6"></td> </tr>
                    <tr>
                        <th class="formTitle">完成时间:</th>
                        <td class="formValue">
                            <input id="CompleteDate" disabled type="text" class="form-control input-wdatepicker completetr" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })" />
                        </td>
                        <th class="formTitle">完成人:</th>
                        <td class="formValue">
                            <input id="CompleteUserName" disabled type="text" class="form-control completetr" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle" valign="top" style="padding-top: 4px;">
                            完成情况
                        </th>
                        <td class="formValue" colspan="5">
                            <textarea id="CompleteMemo" disabled class="form-control  completetr" style="height: 50px;"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="second" class="tab-pane">
            <div class="chat-discussion" style="height:587px;">
            </div>
            <div class="chat-message-form">
                <div class="form-group">
                    <textarea class="form-control message-input" name="message" placeholder="输入消息内容，按回车键发送"></textarea>
                </div>

            </div>
        </div>
        <div id="third" class="tab-pane">
            <div class="gridPanel">
                <table id="gridTable_Operate"></table>
            </div>
        </div>
    </div>
    <script>

        $('.choose').click(function () {
            $('.choose').addClass('active');
            $('.pay').removeClass('active');
            $('.wrap').removeClass('active');
            $('.ship').removeClass('active');
            $('#line').addClass('one');
            $('#line').removeClass('two');
            $('#line').removeClass('three');
            $('#line').removeClass('four');
            $('#first').addClass('active');
            $('#second').removeClass('active');
            $('#third').removeClass('active');
            $('#fourth').removeClass('active');
            $("#right-side table").css("margin", "15px 0px");
        });
        $('.pay').click(function () {
            GetMSG();
            $('.pay').addClass('active');
            $('.choose').removeClass('active');
            $('.wrap').removeClass('active');
            $('.ship').removeClass('active');
            $('#line').addClass('two');
            $('#line').removeClass('one');
            $('#line').removeClass('three');
            $('#line').removeClass('four');
            $('#first').removeClass('active');
            $('#second').addClass('active');
            $('#third').removeClass('active');
            $('#fourth').removeClass('active');
            $("#right-side table").css("margin", "15px 0px");
        });
        $('.wrap').click(function () {
            $('.wrap').addClass('active');
            $('.pay').removeClass('active');
            $('.choose').removeClass('active');
            $('.ship').removeClass('active');
            $('#line').addClass('three');
            $('#line').removeClass('two');
            $('#line').removeClass('one');
            $('#line').removeClass('four');
            $('#first').removeClass('active');
            $('#second').removeClass('active');
            $('#third').addClass('active');
            $('#fourth').removeClass('active');
            $("#right-side table").css("margin", "0px");
            getOperateGrid();
        });
        $('.ship').click(function () {
            $('.ship').addClass('active');
            $('.pay').removeClass('active');
            $('.wrap').removeClass('active');
            $('.choose').removeClass('active');
            $('#line').addClass('four');
            $('#line').removeClass('two');
            $('#line').removeClass('three');
            $('#line').removeClass('one');
            $('#first').removeClass('active');
            $('#second').removeClass('active');
            $('#third').removeClass('active');
            $('#fourth').addClass('active');
            $("#right-side table").css("margin", "15px 0px");
        });


    </script>

</div>

